<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <style>
        .test {
            background-color: black;
        }
    </style>
    <script src='https://cdn.staticfile.org/react/16.4.0/umd/react.development.js'></script>
    <script src='https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js'></script>
    <!-- 生产环境中不建议使用 -->
    <script src='https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js'></script>
</head>

<body>
    <div id='app'>
    </div>
    <script type='text/babel'>

        let VDOM = <h1 style={{fontSize:'20px',color:'white'}} className="test">testest</h1>

        ReactDOM.render(VDOM,document.getElementById('app'))
        /*
            jsx语法规则：
	            1.定义虚拟DOM时，不要加引号。
	            2.标签中如果需要用到js表达式，要用{}包着
	            3.标签中类名要用className，不要用class
	            4.内联样式，要用style={{fontSize:'12px',color:'red'}}
	            5.虚拟DOM只能有一个根标签
	            6.像input这类标签必须要有结束标识，也就是/不能忘记
	            7.标签首字母
		            (1)如果小写字母开头，则将该标签转为html中同名元素，如果html中无该标签对应的同名元素，则报错
		            (2)如果大写字母开头，则react就去渲染这个组件，如果没有这个组件，则报错。
        */
    </script>
</body>

</html>